import React from 'react';
import {
  Form,
  Input,
  Row,
  Col,
  Button,
  DatePicker,
  Select,
  Icon,
  Radio,
  InputNumber,
  Checkbox,
  message,
  Upload,
  notification
} from 'antd';
import globalConfig from 'config.js';
import Logger from '../../utils/Logger';
import FieldConverterFactory from '../FieldConverter';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;

const logger = Logger.getLogger('InnerForm');

/**
 * 内部表单组件
 */
class InnerForm extends React.Component {

  /**
   * 表单的查询条件不能直接传给后端, 要处理一下
   *
   * @param oldObj
   * @returns {{}}
   */
  state={}
  filterQueryObj(oldObj) {
    // 将提交的值中undefined的去掉
    const newObj = {};
    for (const key in oldObj) {
      if (oldObj[key]) {
        // 对于js的日期类型, 要转换成字符串再传给后端
        if (oldObj[key] instanceof Object) {
          if(!!oldObj[key][1]) {
            newObj[`${key}Begin`] = oldObj[key][0].format('YYYY-MM-DD  HH:mm:ss');
            newObj[`${key}End`] = oldObj[key][1].format('YYYY-MM-DD  HH:mm:ss');
          }else {
            newObj[key] = oldObj[key].format('YYYY-MM-DD');
          }
        } else {
          newObj[key] = oldObj[key];
        }
      }
    }
    logger.debug('old queryObj: %o, new queryObj %o', oldObj, newObj);
    return newObj;
  }

  /**
   * 处理表单提交
   *
   * @param e
   */

  handleSubmit = (e) => {
    e.preventDefault();

    const oldObj = this.props.form.getFieldsValue();
    const newObj = this.filterQueryObj(oldObj);

    // 还是要交给上层组件处理, 因为要触发table组件的状态变化...
    this.props.parentHandleSubmit(newObj);
  }

  handleReset = (e) => {
    if(e){
      e.preventDefault();
    }
    this.props.form.resetFields();
  }

  getUniqueQueryBtn =()=>{

  }

  getSearchButton() {

    let formBtn = null;
    if (this.props.tableConfig.showSearchBtn) {
      formBtn = (<Row>
        <Col span={12} offset={12} style={{ textAlign: 'right' }}>
          <Button type="primary" onClick={this.handleSubmit} key="search"><Icon type="search" />查询</Button>
          <Button onClick={this.handleReset}><Icon type="cross" key='clears'/>清除条件</Button>
          {this.getUniqueQueryBtn()}
        </Col>
      </Row>)
    }
    return formBtn;
  }

  getSubmitButton() {

  }

  preQueryData=(data,field)=>{  //处理field

  }

  preDealSchema=(schema)=>{   
    return schema;
  }

  deleteExtSchema=(schema)=>{

  }

  modalInnerTable(){

  }

  enableFormField=(field)=>{
    return true
  }

  getOtherCom=()=>{}

  render() {  
    const rows = [];
    let cols = [];

    // 参见antd的布局, 每行被分为24个格子
    // 普通的字段每个占用8格, between类型的字段每个占用16格
    let spaceLeft = 24;
    let schema=this.preDealSchema(this.props.schema);  //对querySchema进行预处理
    schema.forEach((field) => {
      if (this.enableFormField(field)) {
      // 当前列需要占用几个格子? 普通的都是8, 只有datetime between是16
      let spaceNeed = 8;
      if (field.showType === 'between' && field.dataType === 'datetime') {
        spaceNeed = 16;
      }

      if(field.dataType == 'varcharOne'){
       spaceNeed = 16;
      }

      // 如果当前行空间不足, 就换行
      if (spaceLeft < spaceNeed) {
        rows.push(<Row key={rows.length} gutter={16}>{cols}</Row>);
        cols = [];  // 不知array有没有clear之类的方法
        spaceLeft = 24;  // 剩余空间重置
      }

      // 开始push各种FormItem
      var converter=FieldConverterFactory.getConverter(FieldConverterFactory.QueryFormFieldConverter);
      this.preQueryData(this.state.queryData,field);
      cols.push(converter.convert(this,field));

      spaceLeft -= spaceNeed;
      }
    });

    this.deleteExtSchema(schema);
    // 别忘了最后一行
    if (cols.length > 0) {
      rows.push(<Row key={rows.length} gutter={16}>{cols}</Row>);
    }

    // 表单的前面是一堆输入框, 最后一行是按钮
    return (
      <Form layout="horizontal" className="ant-advanced-search-form" style={{margin:"10px 0 5px"}}>
        {rows}
        {this.getSearchButton()}
        {this.getSubmitButton()}
        {this.getOtherCom()}
        {this.modalInnerTable()}
      </Form>
    );
  }

}

export default InnerForm;
